<!-- 重大新闻事假 -->
<template>
    <div class="box">
      <div class="topBar" >
        <div class="topBox">
          <el-form :inline="true" :model="bondInfoForm">
            <el-form-item label="新闻标题：">
                <el-input v-model="bondInfoForm.bondSname" clearable></el-input>
            </el-form-item>
            <el-form-item label="新闻来源：">
              <el-select v-model="value" placeholder="请选择" @change="dimension">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >查询</el-button
              >
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >重置</el-button
              >
            </el-form-item> -->
          </el-form>
          
         
        </div>
        <div class="select">
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >查询</el-button
              >
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >重置</el-button
              >
          </div>
      </div>
      <div class="right">
        <!-- 表格 -->
  
        <div class="bondCard"></div>
        <div class="tableBox">
          <div class="tableBoxChild">
            <div style="margin-bottom: 20px">
              <!--  @click="dialogVisible = true"
                   -->
              <el-button type="primary" class="btn"  @click="dialogVisible = true">新增</el-button>
              <el-button type="primary" class="btn" @click="dialogVisible = true">编辑</el-button>
              <el-button type="primary" class="btn">删除</el-button>
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >导入</el-button
              >
              <el-button type="primary" @click="bondInfoSubmit" class="btn"
                >导出</el-button
              >
            </div>
            <el-table :data="tableData" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="序号" align="center" type="index">
              </el-table-column>
              <el-table-column prop="name" label="新闻标题" align="center">
              </el-table-column>
              <el-table-column prop="name" label="新闻来源" align="center">
              </el-table-column>
               <el-table-column prop="name" label="发布时间" align="center">
              </el-table-column>
              <el-table-column prop="name" label="行业类别" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <span @click="edit" class="operator">编辑</span>
              <span class="operator" @click="deleteFn(scope.row)" style="margin-left: 10px;">删除</span>
            </template>
          </el-table-column>
            </el-table>
          </div>
          <el-pagination
            small
            style="
              float: right;
              padding: 0 24px;
              border-radius: 2px;
              height: 28px;
              line-height: 100px;
            "
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="pageFn"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 新增的弹框 -->
      <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="600px"
      :append-to-body="true"
      destroy-on-close
    >
      <majorNewsEventspop />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    </div>
  </template>
    <script>
    import majorNewsEventspop from "../components/majorNewsEventspop.vue";

  import { getBond } from "@/api/common/index.js";
  import {
    queryBondProbabilityDetail,
    newBondInfo,
  } from "@/api/recommendationSystem/index.js";
  export default {
    components: {
    majorNewsEventspop,
  },
    data() {
      return {
        //表格数据
        tableData: [
          {
            
            name: "2023",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            name: "2023",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            name: "2023",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            name: "2023",
            address: "上海市普陀区金沙江路 1518 弄",
          },
         
        ],
        options: [
          {
            value: "选项1",
            label: "北京",
          },
          {
            value: "选项2",
            label: "上海",
          },
          {
            value: "选项3",
            label: "广州",
          },
          {
            value: "选项4",
            label: "杭州",
          },
          {
            value: "选项5",
            label: "重庆",
          },
          {
            value: "选项6",
            label: "大连",
          },
        ],
        value: "",
        fileList: [
          {
            name: "food.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
          {
            name: "food2.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
        ],
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: "",
          receptionist: "",
        },
        dialogVisible: false,
        drawer: false,
        searchList: [],
      //   tableData: [],
        searchInput: "",
        bondInfo: {},
        total: 0,
        count: "",
        page: 1,
        bondTotal: 0,
        bondInfoForm: {
          bondSname: "",
          bondId: "",
          value1: "",
        },
      };
    },
    filters: {
      filterNum(value) {
        const str = value ? value.toString() : "";
        if (str) {
          const reg =
            str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
          const returnData = str.replace(reg, ",");
          return returnData;
        } else {
          return "";
        }
      },
    },
    mounted() {},
    methods: {
      add() {
      this.title = "新增";
      this.dialogVisible = true;
    },
    edit() {
      this.title = "编辑";
      this.dialogVisible = true;
    },
    handleOk() {
      this.dialogVisible = false;
    },
    deleteFn(row) {
      console.log(row);
      this.$confirm("确定删除该信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
      // 表格的change时间
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      //   新增弹框
      onSubmit() {
        console.log("submit!");
      },
      //
      clearFn() {
        this.bondInfo = {};
      },
      bondInfoSubmit() {
        const param = {
          ...this.bondInfoForm,
          pn: 10,
          page: 1,
        };
        console.log("newBondInfo param", param);
        this.newBondInfo(param);
      },
      glFn(row) {
        return row.assessRate;
        // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
      },
      zjFn() {
        this.drawer = true;
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: 1,
        };
        this.newBondInfo(param);
      },
      bondRowClick(row) {
        this.drawer = false;
        const param = {
          bondName: row.bondName,
          bondId: row.bondId,
          pn: 10,
          page: 1,
        };
        getBond(param).then((res) => {
          this.bondInfo = res.data.result[0];
        });
        queryBondProbabilityDetail({
          bondId: row.bondId,
          page: 1,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      bondPageFn(page) {
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: page,
        };
        this.newBondInfo(param);
      },
      pageFn(currentPage) {
        console.log("pageFn", currentPage);
        queryBondProbabilityDetail({
          bondId: this.bondInfo.bondId,
          page: currentPage,
          pn: 10,
        }).then((res) => {
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      newBondInfo(param) {
        const _this = this;
        newBondInfo(param).then((res) => {
          _this.searchList = res.data.result;
          _this.bondTotal = Number(res.data.totalResults);
          console.log(res, "resres");
        });
      },
      clickFn(v, i) {
        this.clearFn();
        this.count = i;
        this.bondInfo = {
          ...v,
        };
        queryBondProbabilityDetail({
          bondId: v.bondId,
          page: this.page,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
    },
  };
  </script>
    <style lang="scss" scoped>
  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
  
  .pop .el-form ::v-deep .el-form-item .el-form-item__content .el-input__inner {
    width: 100%;
  }
  .pop
    .el-form
    ::v-deep
    .el-form-item
    .el-form-item__content
    .el-textarea__inner {
    border: 1px solid rgba(126, 163, 255, 0.3);
    color: #ffffff;
    background-color: #363657;
  }
  .pop ::v-deep .el-button--primary {
    border: 1px solid rgba(126, 163, 255, 0.3);
    color: #ffffff;
    background-color: #363657;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #363657;
    background: rgba(31, 155, 253, 0.2);
    color: #fff;
  }
  ::v-deep .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #363657;
  }
  ::v-deep .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #363657;
  }
  
  .box {
    .topBar {
      display: flex;
      justify-content: space-between;
      min-height: 80px;
      background-color: #262d47;
      margin-bottom: 10px;
      padding: 20px 20px;
      padding-bottom: 10px;
    }
  
    .topBox {
      display: flex;
  
      span {
        display: inline-block;
      }
  
      .searchBtn {
        margin-left: 20px;
      }
  
      .zj {
        margin-left: 20px;
      }
  
      .khTitle {
        height: 30px;
        line-height: 30px;
        vertical-align: top;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700px;
        margin-right: 10px;
      }
  
      .khInput,
      .zjInput {
        height: 30px;
        line-height: 30px;
        width: 200px;
        overflow: hidden;
        border: 1px solid rgba(126, 163, 255, 0.3);
        color: #ffffff;
        background-color: #363657;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
        line-height: 30px;
        padding: 0px 10px;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
  
      .zjTitle {
        height: 30px;
        line-height: 30px;
        vertical-align: top;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700px;
        margin-right: 10px;
      }
    }
  
    .left {
      width: 240px;
      background-color: #262d47;
      height: 100%;
    }
  
    .right {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  
    .searchList {
      padding-top: 10px;
      height: 700px;
      overflow: scroll;
      padding-left: 10px;
  
      .searchListItem {
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #959fc5;
        font-size: 12px;
        overflow: hidden; //超出隐藏
        white-space: nowrap; //不折行
        text-overflow: ellipsis; //溢出显示省略号
      }
  
      .searchListItem:hover {
        background: #1f9bfd !important;
        color: #fff;
        cursor: pointer;
      }
    }
  
    .searchListItemAct {
      background: #1f9bfd !important;
      color: #fff !important;
    }
  
    .bondCard {
      background-color: #262d47;
      color: #ffffff;
      margin-bottom: 10px;
  
      .info {
        display: flex;
        padding: 20px 20px;
      }
  
      .infoItem {
        width: 300px;
      }
  
      .infoItemVal {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #d6dcff;
      }
  
      .infoItemLabel {
        margin-right: 30px;
        font-size: 14px;
      }
    }
  
    .el-table ::v-deep th.el-table__cell {
      background-color: #1c2238 !important;
      color: #fff;
    }
  
    .tableBox {
      background-color: #262d47;
      flex: 1;
      padding: 15px 10px;
    }
  
    .tableBoxChild {
      min-height: 800px;
    }
  
    .el-pagination {
      text-align: right;
    }
  
    .leftTitle {
      height: 40px;
      line-height: 40px;
      background: #354060;
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #ffffff;
      padding-left: 17px;
      margin-bottom: 10px;
    }
  
    .bondCardTitle {
      height: 40px;
      background: #354060;
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #ffffff;
      padding: 10px 16px;
    }
  }
  </style>
    